<DocMatDrawer></DocMatDrawer>
<DocMatDrawerContainer Secondary="true"></DocMatDrawerContainer>
<DocMatDrawerContent Secondary="true"></DocMatDrawerContent>

<h5 class="mat-h5">Opened</h5>
<DemoContainer SourcePath=".\..\..\MatBlazor.Demo\Frames\MatDrawerPageFrame.razor">
    <Content>
        <iframe src="MatDrawerFrame" style="width: 100%; height: 50%;"></iframe>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"@page ""/MatDrawerFrame""

<MatDrawerContainer Style=""width: 100vw; height: 100vh;"">
    <MatDrawer @bind-Opened=""@Opened"">
        Drawer Content
    </MatDrawer>
    <MatDrawerContent>
        <div>
            <MatButton OnClick=""@((e) => ButtonClicked())"">
                @if (Opened)
                {
                    <span>Hide Menu</span>
                }
                else
                {
                    <span>Open Menu</span>
                }
            </MatButton>
        </div>
        <p>Page Content</p>
    </MatDrawerContent>
</MatDrawerContainer>


@code
{
    bool Opened = true;

    void ButtonClicked()
    {
        Opened = !Opened;
    }

}")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Modal</h5>
<DemoContainer SourcePath=".\..\..\MatBlazor.Demo\Frames\MatDrawerModalPageFrame.razor">
    <Content>
        <iframe src="MatDrawerModalFrame" style="width: 100%; height: 50%;"></iframe>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"@page ""/MatDrawerModalFrame""

<MatDrawerContainer Style=""width: 100vw; height: 100vh;"">
    <MatDrawer @bind-Opened=""@Opened"" Mode=""@MatDrawerMode.Modal"">
        Drawer Content
    </MatDrawer>
    <MatDrawerContent>
        <div>
            <MatButton OnClick=""@((e) => ButtonClicked())"">Open Menu</MatButton>
        </div>
        <p>Page Content</p>
    </MatDrawerContent>
</MatDrawerContainer>


@code
{
    bool Opened = true;

    void ButtonClicked()
    {
        Opened = !Opened;
    }

}")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Responsive with Custom Width</h5>
<DemoContainer SourcePath=".\..\..\MatBlazor.Demo\Frames\MatDrawerResponsivePageFrame.razor">
    <Content>
        <iframe src="MatDrawerResponsiveFrame" style="width: 100%; height: 50%;"></iframe>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"@page ""/MatDrawerResponsiveFrame""


<MatDrawerContainer Style=""height: 100vh;"" DrawerWidth=""400px"">
    <MatHidden Breakpoint=""@MatBreakpoint.SM"" Direction=""@MatHiddenDirection.Up"">
        <ChildContent>
            <MatDrawer @bind-Opened=""@Opened"" Mode=""@MatDrawerMode.Modal"">
               Drawer Content
            </MatDrawer>
        </ChildContent>

        <ElseContent>
            <MatDrawer @bind-Opened=""@Opened"" Mode=""@MatDrawerMode.Dismissible"">
                400px Custom Width Drawer Content
            </MatDrawer>
        </ElseContent>
    </MatHidden>

    <MatDrawerContent>
        <div>
            <MatButton OnClick=""@((e) => ButtonClicked())"">
                @if (Opened)
                {
                    <span>Hide Menu</span>
                }
                else
                {
                    <span>Open Menu</span>
                }
            </MatButton>
        </div>
        <p>Page Content</p>
    </MatDrawerContent>
</MatDrawerContainer>


@code
{
    bool Opened = true;

    void ButtonClicked()
    {
        Opened = !Opened;
    }

}")></BlazorFiddle>
    </SourceContent>
</DemoContainer>